<template>
  <view>
    <view class="guige">
      <text>规格名称</text>

      <!-- <u-button @click="ggshow = true">添加新规格</u-button> -->
      <van-button @click="ggshow = true" round type="info"
        >添加新规格</van-button
      >
    </view>
    <view class="guigeaddlist">
      <u-tag
        :text="item.name"
        closeable
        :show="show"
        v-for="(item, index) in guigelist"
        :key="index"
        @close="guigeDel(item.id)"
        class="guigeadditem"
      />
    </view>
    <view class="guigecontentlist">
      <view
        class="guigecontentitem"
        v-for="(item, index) in guigelist"
        :key="index"
      >
        <view class="chiladtitle">
          <text class="guigecontentitem_text">{{ item.name }}:</text>
          <!-- <text class="guigecontentitem_add" @click="ggchildeshowadd(item.id)"
            >添加</text
          > -->
          <van-button @click="ggchildeshowadd(item.id)" round type="info"
            >添加规格</van-button
          >
        </view>
        <!-- 子规格内容 -->
        <view class="chiladcontent">
          <view
            class="groupitem"
            v-for="(itm, ind) in item.data"
            :key="ind"
            @click="groupitemClick(index, itm.childeid, itm.chaked)"
            :class="{ active: itm.chaked }"
            >{{ itm.text }}
            <u-icon
              name="close"
              color="#2979ff"
              @click="handleChildDel(index, ind, item.id, itm.text)"
              style="margin-left: 20rpx"
            ></u-icon
          ></view>
        </view>
        <!-- <view class="chiladcontent">
					<u-tag :text="itm.text" closeable :show="childshow" v-for="(itm,ind) in item.data" @close="listClick(index,ind)" :key="ind" class="guigeadditem"/>
				</view> -->
      </view>
    </view>

    <view
      class="generatelist"
      v-for="(item, index) in combination"
      :key="index"
    >
      <view class="generatelist_title">{{ item.name }}</view>
      <view class="generatelist_content">
        <view class="generatelist_item">
          <text>租赁区库存</text>
          <input
            type="number"
            placeholder="请输入库存"
            v-model="item.lease_stock"
          />
        </view>
        <view class="generatelist_item">
          <text>出售区库存</text>
          <input
            type="number"
            placeholder="请输入库存"
            v-model="item.sale_stock"
          />
        </view>
        <view class="generatelist_item">
          <text>仓库</text>
          <input
            type="number"
            placeholder="请输入库存"
            v-model="item.show_stock"
          />
        </view>
        <!-- <view class="generatelist_item">
          <text>清洗中库存</text>
          <input
            type="number"
            placeholder="请输入库存"
            v-model="item.clean_stock"
          />
        </view> -->
        <view class="generatelist_item">
          <text></text>
          <text
            @click="generatelist_del(item)"
            style="
              background: red;
              color: #fff;
              text-align: center;
              line-height: 2;
              border-radius: 20rpx;
            "
            >删除</text
          >
        </view>
      </view>
    </view>
    <!-- 确定按钮 -->
    <!-- <view
      class=""
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 160rpx;
      "
    >
      <u-button
        size="medium"
        :ripple="true"
        type="warning"
        @click="submitClick()"
        v-if="combination.length != 0"
        >确定</u-button
      >
    </view> -->

    <!-- 生成按钮 -->
    <!-- <view class="">
      <u-button
        size="default"
        :ripple="true"
        type="primary"
        @click="generateClick()"
        >生成</u-button
      >
    </view> -->

    <!-- 生成-->
    <view class="jiesuan">
      <view class="pay-btn">
        <u-button
          @click="generateClick()"
          type="primary"
          shape="circle"
          size="medium"
          >生成</u-button
        >
        <u-button
          @click="handleSubmit()"
          type="error"
          shape="circle"
          size="medium"
          >提交</u-button
        >
      </view>
    </view>

    <!-- 添加主规格的弹窗与事件 -->
    <u-popup v-model="ggshow" mode="center" class="ggshowtc">
      <input type="text" placeholder="输入规格名称" v-model="guigename" />
      <view class="ggshowtc_btn">
        <text @click="guigeadd()" style="background: #00a1ff">确认</text>
        <text @click="ggshow = false" style="background: #babbbb">取消</text>
      </view>
    </u-popup>

    <!-- 添加子规格的弹窗与事件 -->
    <u-popup v-model="ggchildeshow" mode="center" class="ggshowtc">
      <input type="text" placeholder="输入子规格" v-model="guigechildname" />
      <view class="ggshowtc_btn">
        <text @click="guigechildadd()" style="background: #00a1ff">确认</text>
        <text @click="ggchildeshow = false" style="background: #babbbb"
          >取消</text
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ggshow: false,
      ggchildeshow: false,
      show: true,
      childshow: true,
      list: [],
      guigelist: [],
      guigename: "",
      guigechildname: "",
      childeid: "",
      combination: [],
      goodsid: "",
    };
  },
  mounted() {
    // 获取属性列表
    this.getSkuList();
  },
  onLoad(option) {
    console.log(option.id);
    this.goodsid = option.id;
  },
  methods: {
    // 获取属性列表
    getSkuList() {
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/getSkuValueCommonList", //仅为示例，并非真实接口地址。
        data: {},
        method: "GET",
        header: {},
        success: (res) => {
          if (res.data.code == 1) {
            this.guigelist = res.data.data;
            this.guigelist.map((item) => {
              var a = item.name;
              console.log(item);
              if (item.data) {
                item.data.map((item) => {
                  item.text2 = a;
                });
              }
            });
            console.log(this.guigelist);
          }
        },
      });
    },
    // 添加主规格的事件
    guigeadd() {
      if (this.guigename) {
        // var id = this.guigelist.length + 1;

        uni.request({
          url: "http://gxyckf.1qit.com/api/admin.goods/SkuValueCommonAdd", //仅为示例，并非真实接口地址。
          method: "GET",
          data: {
            // name
            name: this.guigename,
          },

          success: (res) => {
            if (res.data.code == 1) {
              console.log(res.data.data);

              this.guigelist.push({ id: res.data.data, name: this.guigename });

              console.log(this.guigelist);
            }

            uni.showToast({
              title: res.data.msg,
              icon: "success", //如果要纯文本，不要icon，将值设为'none'
              duration: 2000, //持续时间为 2秒
            });

            this.guigename = "";
            this.ggshow = false;
          },
        });
      } else {
        uni.showToast({
          title: "请输入规格名称",
          icon: "none", //如果要纯文本，不要icon，将值设为'none'
          duration: 2000, //持续时间为 2秒
        });
      }
    },
    // 添加子规格事件
    guigechildadd() {
      if (this.guigechildname) {
        uni.request({
          url: "http://gxyckf.1qit.com/api/admin.goods/SkuValueCommonAdd", //仅为示例，并非真实接口地址。
          method: "GET",
          data: {
            // id
            id: this.childeid,
            // value
            value: this.guigechildname,
          },
          success: (res) => {
            if (res.data.code == 1) {
              // 遍历guigelist
              this.guigelist.map((item) => {
                // var a = item.name;
                // item.data.map((item) => {
                //   // console.log(item);
                //   item.text2 = a;
                // });
                // console.log(item);
                if (item.id == this.childeid) {
                  if (item.data == undefined) {
                    item.data = [];
                    item.data.push({
                      childeid: 1,
                      text: this.guigechildname,
                      chaked: false,
                    });
                  } else {
                    var cid = item.data.length + 1;
                    item.data.push({
                      childeid: cid,
                      text: this.guigechildname,
                      chaked: false,
                    });
                  }
                }
              });
              console.log(this.guigelist);
              this.guigelist.map((item) => {
                var a = item.name;
                console.log(item);
                if (item.data) {
                  item.data.map((item) => {
                    // console.log(item);
                    item.text2 = a;
                  });
                }
                // item.data.map((item) => {
                //   // console.log(item);
                //   item.text2 = a;
                // });
              });
            }
            uni.showToast({
              title: res.data.msg,
              icon: "success", //如果要纯文本，不要icon，将值设为'none'
              duration: 2000, //持续时间为 2秒
            });
            // console.log(this.guigelist);
            this.guigechildname = "";
            this.ggchildeshow = false;
          },
        });
      } else {
        uni.showToast({
          title: "请输入规格名称",
          icon: "none", //如果要纯文本，不要icon，将值设为'none'
          duration: 2000, //持续时间为 2秒
        });
      }
    },

    // 主规格删除事件
    guigeDel(id) {
      console.log(id);
      this.guigelist.map((item, index) => {
        console.log(item);
        console.log(index);
        if (item.id === id) {
          uni.request({
            url: "http://gxyckf.1qit.com/api/admin.goods/GoodsSkuCommonDel", //仅为示例，并非真实接口地址。
            data: {
              id: id,
            },
            method: "GET",
            header: {},
            success: (res) => {
              if (res.data.code == 1) {
                uni.showToast({
                  title: res.data.msg,
                  icon: "success", //如果要纯文本，不要icon，将值设为'none'
                  duration: 2000, //持续时间为 2秒
                });
                this.guigelist.splice(index, 1);
                this.getSkuList();
              }
            },
          });
        }
      });
    },

    // 选中子规格切换当前项事件
    groupitemClick(index, id, che) {
      // 主规格id
      // console.log(index);
      // 子规格id
      // console.log(id);
      // 当前是否选中选中
      // console.log(che);
      this.guigelist[index].data.map((item, index) => {
        // console.log(item);
        // console.log(index);
        if (item.childeid == id) {
          item.chaked = !item.chaked;
          this.$forceUpdate();
        }
      });
    },
    // 子规格删除属性值
    handleChildDel(index, ind, id, text) {
      // 主规格的第一项
      console.log(index);
      // 子规格的当前项
      console.log(ind);
      // 主规格的id
      console.log(id);
      // 子规格的属性值
      console.log(text);
      // 传 id value

      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/GoodsSkuCommonDel", //仅为示例，并非真实接口地址。
        data: {
          id: id,
          value: text,
        },
        method: "GET",
        header: {},
        success: (res) => {
          if (res.data.code == 1) {
            console.log(res.data.msg);
            uni.showToast({
              title: res.data.msg,
              icon: "success", //如果要纯文本，不要icon，将值设为'none'
              duration: 2000, //持续时间为 2秒
            });
            this.guigelist[index].data.splice(ind, 1);
            this.$forceUpdate();
          }
        },
      });
    },
    // 添加子规格事件
    ggchildeshowadd(id) {
      console.log(id);
      this.childeid = id;
      this.ggchildeshow = true;
    },
    // 点击生成事件
    generateClick() {
      console.log(this.guigelist);
      if (this.guigelist.length) {
        var newtags = [];
        var newtagsid = [];

        this.guigelist.map((item, index) => {
          var newdata = [];
          item.data.map((itm, inx) => {
            if (itm.chaked) {
              newdata.push(itm);
            }
            // console.log(newdata);
          });
          if (newdata == "") {
          } else {
            newtagsid.push(item.id);
          }
        });

        this.guigelist.map((item) => {
          newtagsid.map((i) => {
            if (item.id == i) {
              newtags.push(item);
            }
            console.log(newtags);
          });
        });

        let list = this.arrp(newtags);
        console.log(list);
        if (list.length) {
          this.combination = [];
          list.map((item) => {
            // console.log("这里");
            // console.log(item);
            if (item.constructor === Array) {
              if (item.length) {
                let str = "";
                item.map((itm) => {
                  if (str == "") {
                    str += itm.text;
                  } else {
                    str += ",";
                    str += itm.text;
                  }
                });
                let str2 = "";
                item.map((itm) => {
                  if (str2 == "") {
                    str2 += itm.text2;
                  } else {
                    str2 += ",";
                    str2 += itm.text2;
                  }
                });

                this.combination.push({
                  id: this.combination.length + 1,
                  name: str,
                  // 属性名
                  attrname: str2,
                  lease_stock: 0,
                  sale_stock: 0,
                  show_stock: 0,
                  // clean_stock: "",
                });
              }
            } else {
              let str = "";
              str = item.text;
              str += " ";

              let str2 = "";
              str2 = item.text2;
              str2 += " ";

              this.combination.push({
                id: this.combination.length + 1,
                // 属性名
                attrname: str2,
                name: str,
                lease_stock: 0,
                sale_stock: 0,
                show_stock: 0,
                // clean_stock: "",
              });
            }
          });
          // console.log(this.combination);
        } else {
          uni.showToast({
            title: "请添加子规格",
            icon: "none", //如果要纯文本，不要icon，将值设为'none'
            duration: 2000, //持续时间为 2秒
          });
          return false;
        }
      } else {
        uni.showToast({
          title: "请添加规格",
          icon: "none", //如果要纯文本，不要icon，将值设为'none'
          duration: 2000, //持续时间为 2秒
        });
        return false;
      }
    },
    arrp(arr) {
      // console.log(arr);

      //编辑原数组格式
      if (arr[0].data) {
        arr = arr.map((item) => {
          var newadd = [];
          item.data.map((itm, inx) => {
            if (itm.chaked) {
              newadd.push(itm);
            }
          });
          return (item = newadd);
        });
      }

      if (arr.length === 1) {
        return arr[0];
      } else {
        //有两个子数组就合并
        let arrySon = [];
        //将组合放到新数组中
        if (arr[0].length) {
          arr[0].forEach((item, index) => {
            if (arr[1]) {
              arr[1].forEach((item1, index1) => {
                arrySon.push([].concat(arr[0][index], arr[1][index1]));
              });
            } else {
              uni.showToast({
                title: "请删除空白规格",
                icon: "none", //如果要纯文本，不要icon，将值设为'none'
                duration: 2000, //持续时间为 2秒
              });
              return false;
            }
          });
          // 新数组并入原数组,去除合并的前两个数组
          arr[0] = arrySon;
          arr.splice(1, 1);
          // 递归
          return this.arrp(arr);
        } else {
          uni.showToast({
            title: "请删除空白规格",
            icon: "none", //如果要纯文本，不要icon，将值设为'none'
            duration: 2000, //持续时间为 2秒
          });
          return false;
        }
      }
    },
    // 生成的列表删除
    generatelist_del(i) {
      this.combination.map((item, index) => {
        if (item == i) {
          this.combination.splice(index, 1);
        }
      });
    },
    // 提交规格
    handleSubmit() {
      console.log(this.combination);
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/goodsSkuAdd", //仅为示例，并非真实接口地址。
        data: {
          goods_data: this.combination,
          goods_id: this.goodsid,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 0) {
            uni.showToast({
              title: res.data.msg,
              icon: "error",
              duration: 2000,
            });
          } else if (res.data.code == 1) {
            console.log(res.data.data);
            uni.showToast({
              title: res.data.msg,
              icon: "success",
              duration: 2000,
            });
            // 跳转到商品列表
            uni.navigateTo({
              url: "../goodsadmin/goodsadmin",
            });
          }
        },
      });
    },
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.jiesuan {
  overflow: hidden;
  width: 100%;
  position: fixed;
  box-shadow: 0 0 20rpx #ccc;
  background: #fff !important;
  /* padding-top: 20rpx; */
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.pay-btn {
  /* text-align: right; */
  justify-content: space-around;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}

.chiladtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chiladcontent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 10% 0;
}
.u-mode-light-primary {
  margin: 2% 0;
  margin-right: 4%;
}
.u-mode-center-box {
  padding: 8% 10%;
  border-radius: 10rpx;
}
.ggshowtc input {
  border-bottom: 1rpx solid #d6d6d6;
  font-size: 32rpx;
  height: 64rpx;
}
.ggshowtc_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14%;
}
.ggshowtc_btn text {
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 2;
  padding: 0 14rpx;
}
.guige {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  padding: 2% 5%;
  /* border-bottom: 1rpx solid #d6d6d6; */
  margin: 4% 0;
}
.guigeaddlist {
  width: 90%;
  margin: 0 5%;
}
.guigeadditem {
}
.guigecontentlist {
  width: 90%;
  margin: 10% 5%;
}
.guigecontentitem {
  padding: 4% 0;
}
.generatelist {
  width: 86%;
  margin: 2% 5%;
  background: #fff;
  border-radius: 10rpx;
  padding: 0 2%;
  padding-bottom: 100rpx;
  margin-bottom: 40rpx;
}
.generatelist_title {
  font-size: 44rpx;
  font-weight: 600;
}
.generatelist_content {
}
.generatelist_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5% 0;
  border-bottom: 1rpx solid #efefef;
  font-size: 32rpx;
  color: #464646;
}
.generatelist_item:last-child {
  border-bottom: 0;
}
.generatelist_item text {
  width: 200rpx;
}
.generatelist_item input {
  text-align: right;
}

.groupitem {
  padding-left: 4%;
  padding-right: 4%;
  background: #e2e2e2f;
  margin: 1%;
  font-size: 14px;
  line-height: 2;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #e8e8e8;
  color: #969696;
}
.active {
  background: #ceeeff;
  color: #57a9ff;
}
</style>
